﻿@model List<Kanban.Entity.Equipe>

@{
    ViewBag.Title = "Usuarios";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


@section styles{
    <style type="text/css">
        body {
            padding-top: 60px;
            padding-bottom: 40px;
        }

        label.checkbox {
            padding-right:11px;
        }
    </style>
}


@{ Html.RenderPartial("_Menu");  }

<div class="container">


    <div style="padding-bottom: 10px">
        <a href="javascript:void(0)" class="btn btn-success botaoAdicionarEquipe"> <i class="icon-plus icon-white"></i> Equipe</a>
    </div>

        @if (Model == null)
    {

        <div class="alert alert-info">
            Nenhuma equipe cadastrada.
        </div>
        
    }
    else
    {

    <table class="table table-bordered table-hover" id="equipes">
        <thead>
            <tr>
                <th class="span4">Nome</th>
                <th class="span7">Usuários</th>
                <th class="span1"></th>
            </tr>
        </thead>
        <tbody>
            @foreach(Kanban.Entity.Equipe equipe in Model)
            {
                <tr data-idEquipe="@equipe.Id">
                    <td class="nome">@equipe.Nome
                    </td>
                    <td class="form-inline @string.Concat("equipe", equipe.Id)">
                        @if( equipe.Usuarios != null){
                            foreach(Kanban.Entity.Usuario usuario in equipe.Usuarios){
                                <label class="checkbox"><input type="checkbox" value="@usuario.Id" name="@string.Concat("equipe", equipe.Id )" />@usuario.Nome</label>                                
                            }
                        }else{
                            <span class="vazio">Nenhum usuário cadastrado</span>      
                        }
                    </td>
                    <td>
                        <div class="btn-group pull-right">
                            <button class="btn dropdown-toggle" data-toggle="dropdown">
                                Ações
                          <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" data-idEquipe="@equipe.Id">
                                <li><a href="javascript:void(0)" class="adicionarUsuario"><i class="icon-plus"></i> Adicionar usuário</a></li>
                                <li><a href="javascript:void(0)" class="excluirUsuarios"><i class="icon-minus"></i> Excluir usuários selecionados</a></li>
                                <li><a href="javascript:void(0)" class="editarEquipe"><i class="icon-pencil"></i> Editar equipe</a></li>
                                <li class="divider"></li>
                                <li><a href="javascript:void(0)" class="excluirEquipe"><i class="icon-warning-sign"></i> Excluir equipe</a></li>
                            </ul>
                        </div>
                    </td>
                </tr>
            }
        </tbody>
    </table>
    }
</div>


<div id="novaEquipe" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="novaEquipeLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="novaEquipeLabel">Cadastrar equipe</h3>
  </div>
  <div class="modal-body">
    
      <div class="row-fluid">          
          
          <div id="erroNovaEquipe" class="alert alert-error" style="display:none"></div>          
        
            <label class="span4">Nome</label>
            <input class="span8" autofocus="autofocus" type="text" id="nomeNovaEquipe" />
            
    

        </div>

  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancelar</button>
    <button class="btn btn-primary" id="adicionarEquipe">Adicionar</button>
  </div>
</div>





<div id="novoUsuario" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="novoUsuarioLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="novoUsuarioLabel">Adicionar usuário</h3>
  </div>
  <div class="modal-body">
    
      <div class="row-fluid">          
          
          <div id="erroNovoUsuario" class="alert alert-error" style="display:none"></div>          
        
            <label class="span4">Nome</label>
            <input class="span8" autofocus="autofocus" type="text" id="nomeNovoUsuario" />
            
          <input type="hidden" id="equipeNovoUsuario" />
    

        </div>

  </div>
  <div class="modal-footer">
    <label class="pull-left checkbox"><input type="checkbox" id="manterNovoUsuario" /> Manter esta janela aberta após adicionar</label>
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancelar</button>
    <button class="btn btn-primary" id="adicionarUsuario">Adicionar</button>
  </div>
</div>

@section scripts{

    <script type="text/javascript">

        var url_base = '@Url.Content("~")';

        $(function () {

            /*$('.table').on('mouseover', 'td.nome', function () {
                $(this).find('.btn-group').toggle();
            });

            $('.table').on('mouseout', 'td.nome', function () {
                $(this).find('.btn-group').toggle();
            });*/

            $('.table').on('click', '.excluirUsuarios', function () {

                var idEquipe = $(this).parent().parent().attr('data-idEquipe');
                ExcluirUsuariosSelecionados(idEquipe);

            });

            $('.modal').on('shown', function () {
                $(this).find('[autofocus]:first').focus();
            });

            $('.table').on('click', '.editarEquipe', function () {
                AindaNaoEstaPronto();
            });

            $('.table').on('click', '.excluirEquipe', function () {
                
                var idEquipe = $(this).parent().parent().attr('data-idEquipe');
                ExcluirEquipe(idEquipe);

            });

            $('body').on('click', '.adicionarUsuario', function () {
                $('#erroNovoUsuario').hide();
                $('#novoUsuario').modal();
                $('#equipeNovoUsuario').val($(this).parent().parent().attr('data-idEquipe'));
            });

            $('body').on('click', '.botaoAdicionarEquipe', function () {
                $('#novaEquipe').modal();
            });


            $('#adicionarUsuario').click(function () {                
                AdicionarUsuario();               
            })


            $('body').on('click', '#adicionarEquipe', function () {
                AdicionarEquipe();
            });

            function ExcluirUsuariosSelecionados(idEquipe) {
                var usuarios = $('td.equipe' + idEquipe).find('input[type=checkbox]:checked');

                if (usuarios.length == 0) {
                    alert('Parece que você esqueceu de selecionar um usuário para ser excluído.');
                    return;
                }

                if (!confirm('Tem certeza que deseja excluir os usuários selecionados desta equipe?')) {
                    return;
                }

                var lista = new Array();
                for (var i = 0; i < usuarios.length; i++) {
                    lista.push($(usuarios[i]).val());
                }

                var req = $.ajax({
                    url: url_base + 'api/equipes/' + idEquipe + '/usuarios',
                    type: 'DELETE',
                    dataType: 'json',
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(lista)
                });

                req.done(function () {

                    for (var i = 0; i < lista.length; i++) {
                        $('td.equipe' + idEquipe).find('[value=' + lista[i] + ']').parent().remove();
                    }

                    if ($('td.equipe' + idEquipe).find('input[type=checkbox]').length == 0) {
                         $('td.equipe' + idEquipe).append('<span class="vazio">Nenhum usuário cadastrado</span>');
                    }

                    //alert('Usuários excluídos com sucesso.');
                });

                req.fail(function (jqXHR, textStatus, errorThrown) {
                    var resultado = $.parseJSON(jqXHR.responseText);
                    alert(resultado["ExceptionMessage"]);
                });

            }

            function AdicionarEquipe() {

                $('#erroNovaEquipe').hide();

                var nome = $('#nomeNovaEquipe').val(); //prompt('Qual o nome da nova equipe?');

                if (nome == null || nome == '') {
                    $('#erroNovaEquipe').text('O nome não foi preenchido.')
                    $('#erroNovaEquipe').show();
                    return;
                }
                    

                var req = $.ajax({
                    url: url_base + 'api/equipes',
                    type: 'POST',
                    dataType: 'json',
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify({ Nome: nome })
                });

                req.done(function (json) {

                    if ($('#equipes tbody').length == 0) {
                        location.reload();
                        return;
                    }

                    var html = '<tr data-idEquipe="' + json.Id + '">';
                    html += '<td class="nome" style="height:50px">' + json.Nome;                   
                    html += '</td>';
                    html += '    <td class="form-inline equipe'+  json.Id +'">';
                    html += '        <span class="vazio">Nenhum usuário cadastrado</span>';
                    html += '    </td>';
                    html += '<td><div class="btn-group pull-right">';
                    html += '    <button class="btn dropdown-toggle" data-toggle="dropdown">';
                    html += '        Ações';
                    html += '  <span class="caret"></span>';
                    html += '    </button>';
                    html += '    <ul class="dropdown-menu" data-idEquipe="' + json.Id + '">';
                    html += '       <li><a href="javascript:void(0)" class="adicionarUsuario"><i class="icon-plus"></i> Adicionar usuário</a></li>';
                    html += '       <li><a href="javascript:void(0)" class="excluirUsuarios"><i class="icon-minus"></i> Excluir usuários selecionados</a></li>';
                    html += '       <li><a href="javascript:void(0)" class="editarEquipe"><i class="icon-pencil"></i> Editar equipe</a></li>';
                    html += '       <li class="divider"></li>';
                    html += '       <li><a href="javascript:void(0)" class="excluirEquipe"><i class="icon-warning-sign"></i> Excluir equipe</a></li>';
                    html += '    </ul>';
                    html += '</div></td>';
                    html += '</tr>';

                    $('#equipes tbody').append(html);

                    $('#novaEquipe').modal('hide');
                    $('#nomeNovaEquipe').val('');
                });

                req.fail(function (jqXHR, textStatus, errorThrown) {
                    var resultado = $.parseJSON(jqXHR.responseText);
                    alert(resultado["ExceptionMessage"]);
                });
            }

            function AdicionarUsuario() {

                $('#erroNovoUsuario').hide();

                var usuario = $('#nomeNovoUsuario').val(); //prompt('Qual o nome do usuário?');
                var idEquipe = $('#equipeNovoUsuario').val(); //$(this).parent().parent().attr('data-idEquipe');

                if (usuario != null && usuario != '') {
                    
                    usuario = usuario.toLowerCase();

                    var req = $.ajax({
                        url: url_base + 'api/equipes/' + idEquipe,
                        type: 'POST',
                        dataType: 'json',
                        contentType: 'application/json;charset=utf-8',
                        data: JSON.stringify({ Nome: usuario })
                    });

                    req.done(function (json) {
                        //alert('Usuário adicionado com sucesso!');
                        
                        $('#nomeNovoUsuario').val('');                        

                        if ($('#manterNovoUsuario').is(':checked')) {
                            $('#nomeNovoUsuario').focus();                            
                        } else {
                            $('#equipeNovoUsuario').val('');
                            $('#novoUsuario').modal('hide');
                        }

                        var html = ' <label class="checkbox"><input type="checkbox" value="' + json.Usuarios[0].Id + '" name="equipe@equipe.Id" /> ' + json.Usuarios[0].Nome + '</label> ';

                        var equipe = $('.equipe' + json.Id);

                        var vazio = equipe.find('.vazio');

                        if (vazio.length > 0)
                            vazio.remove();

                        equipe.append(html);




                    });

                    req.fail(function (jqXHR, textStatus, errorThrown) {
                        var resultado = $.parseJSON(jqXHR.responseText);
                        //alert(resultado["ExceptionMessage"]);
                        $('#erroNovoUsuario').text(resultado["ExceptionMessage"]);
                        $('#erroNovoUsuario').show();
                    });

                    
                } else {
                    $('#erroNovoUsuario').text('O nome não foi informado');
                    $('#erroNovoUsuario').show();
                }                               
            }

            function AindaNaoEstaPronto() {
                alert('Ops! Desculpe, essa funcionalidade ainda não está pronta. (=');
            }

            function ExcluirEquipe(idEquipe) {
                if (confirm('Tem certeza que deseja excluir essa equipe?')) {

                    var req = $.ajax({
                        url: url_base + 'api/equipes/' + idEquipe,
                        type: 'DELETE',
                        dataType: 'json',
                        contentType: "application/json;charset=utf-8"
                    });

                    req.done(function (equipe) {
                        $('tr[data-idEquipe=' + equipe.Id + ']').remove();

                        if ($('.table tbody tr').length == 0) {
                            location.reload();
                            return;
                        }
                    });

                    req.fail(function (jqXHR, textStatus, errorThrown) {
                        var resultado = $.parseJSON(jqXHR.responseText);
                        alert(resultado["ExceptionMessage"]);
                    });
                }
            }
        });

    </script>
    
}